<template>
    <div class="user-info-box">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="img-box">
            <img src="/img/mine/def_img.jpg" alt="" width="150" height="150">
        </div>
        <div class="info-box">
            <div>
                <span>用户账号：{{ userInfo.account }}</span>

                <div class="input-item">
                    <el-row>
                        <el-col span="3">
                            <span>昵称：</span>
                        </el-col>
                        <el-col span="21">
                            <el-input v-model="userInfo.nicname" placeholder="请输入内容"></el-input>
                        </el-col>
                    </el-row>
                </div>

                <div class="input-item">
                    <el-row>
                        <el-col span="3">
                            <span>手机号</span>
                        </el-col>
                        <el-col span="21">
                            <el-input v-model="userInfo.phone" placeholder="请输入内容"></el-input>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="input-item">
            <el-button class="el-btn" type="primary">保存</el-button>
        </div>
        <div class="input-item">
            <el-button class="el-btn" type="danger">退出登录</el-button>
        </div>
    </div>
</template>

<script>
import LOCAL from '@/main'
export default {

    data() {
        return {
            LOCAL,
            userInfo: {
                avatar: "/img/mine/def_img.jpg",
                nicname: "用户的昵称",
                phone: "12345678910",
                account: "用户的账号@qq.com"
            }
        }
    },
    methods: {

    },
    mounted() {
        LOCAL.TITLE_INFO = "我的信息"
        LOCAL.CHI = true;
        // localStorage.getItem("userInfo") && (this.userInfo = JSON.parse(localStorage.getItem("userInfo")))
        // console.log(this.userInfo);
    },
}
</script>

<style scoped>
.user-info-box {
    position: relative;
    /* display: block; */
    /* margin-top: 20px; */

}

.input-item .el-btn {
    width: 150px;
}

.input-item {
    margin-top: 10px;
    margin-bottom: 15px;
}

.img-box img {
    border-radius: 5px;
    overflow: hidden;
    border: 0.5px solid #c4c4c4;

}

.info-box {
    width: 70vh;
    margin: 0 auto;
    height: auto;
}

.info-box span {
    height: 40px;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    color: #333;
}
</style>